<!--  -->
<template>
  <div>
    <!-- <el-button type="primary" plain @click="dialogTableVisible = true">添加用户</el-button>
    <el-dialog :visible.sync="dialogTableVisible" title="添加用户">
      <el-form :model="user">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="user.uname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="user.upwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="user.utele" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="类型" :label-width="formLabelWidth">
          <el-select v-model="user.utype" placeholder="请选择状态">
            <el-option label="会员" value="1"></el-option>
            <el-option label="普通用户" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员结束时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="user.endday"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd hh:mm:ss">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="余额" :label-width="formLabelWidth">
          <el-input v-model="user.umoney" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog> -->
    <!-- 修改 -->
    <el-dialog :visible.sync="dialogFormVisible4Edit" title="修改订单">
      <el-form :model="order">
      <!-- <el-form-item label="订单id" :label-width="formLabelWidth">
          <el-input v-model="order.oid" autocomplete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="order.omessage" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="modifyOrder()">确 定</el-button>
      </div>
    </el-dialog>

    <el-table :data="Ordera.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
      <el-table-column prop="oid" label="订单id" width="80">
      </el-table-column>
      <el-table-column label="订单状态" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.ostate == 0">未付款</span>
          <span v-if="scope.row.ostate == 1">已付款</span>
          <span v-if="scope.row.ostate == 2">派送中</span>
          <span v-if="scope.row.ostate == 3">已完成</span>
          <span v-if="scope.row.ostate == 4">待退款</span>
          <span v-if="scope.row.ostate == 5">已退款</span>
        </template>
      </el-table-column>
      <el-table-column prop="oprice" label="订单总价" width="80">
      </el-table-column>
      <el-table-column prop="omessage" label="地址" width="110">
      </el-table-column>
      <el-table-column prop="onote" label="商品备注" width="120">
      </el-table-column>
      <el-table-column prop="ocoupan" label="优惠" width="80">
      </el-table-column>

      <el-table-column prop="odiscount" label="打折比" width="80">
      </el-table-column>
        <el-table-column prop="uid" label="用户ID " width="80">
      </el-table-column>
      <el-table-column prop="orprice" label="实付价" width="80">
      </el-table-column>

      <el-table-column prop="otime" label="下单时间" width="160">
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template v-slot="scope">

            <el-button type="primary" v-if="scope.row.ostate == 1" @click="fahuo(scope.row)">发货</el-button>
            <el-button type="primary" v-if="scope.row.ostate == 1" @click="updateOrder(scope.row)">修改</el-button>
          <!-- <el-button type="danger" @click="deleteOrder(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
     <!--分页区域-->
  <el-pagination
      @size-change="size_change" 
      @current-change="current_change"  
      :current-page="currentPage"  
      :page-sizes="[2,3,5]"  
      :page-size="pagesize"  
      layout="total, sizes, prev, pager, next, jumper"  
      :total="Ordera.length"> 
  </el-pagination>
 
  </div>


</template>
<script >
const axios = require("axios");
axios.defaults.baseURL = '/api/'
export default {
  data() {
    return {
      Ordera: [],
      // //添加用户
      // dialogTableVisible: false,
      // //修改用户
      dialogFormVisible4Edit:false,
      moni:false,
      order: {
        oid: '',
        ostate: '',
        omessage: '',
        oprice: '',
        onote: '',
        ocoupan: '',
        odiscount: '',
        uid: '',
        orprice: '',
        otime: ''
      },
      //模拟model
      ordered: {
        name:'苹果',
        oid: '',
        ostate: '',
        omessage: '',
        oprice: 25,
        onote: '两斤',
        ocoupan: '',
        odiscount: '',
        uid: '',
        orprice: this.oprice-this.ocoupan,
        otime: ''
      },
      formLabelWidth: '120px',
       total:0,//总条目数
        pagesize:10,//每页显示条目个数
        currentPage:1,//当前页数
    }
  },
  props: [],
  components: {},
  created() {
    this.findAll();
     this.size_change(5);
  },
  mounted() {
  },
  methods: {
    simulation(){
      this.moni=true
    },
    findAll() {
      axios.get('/order/getOrderList').then(res => {
        this.Ordera = res.data;
        console.log(res.data);
      })
    },
     size_change(newSize){
       this.pagesize = newSize
   },
   //监听 页码值 改变的事件
   current_change(newPage){
       this.currentPage = newPage
   },
    // cancel: function () {
    //   this.$message.info("当前操作已取消")
    //   this.dialogTableVisible = false,
    //   this.dialogFormVisible4Edit=false
    // },
    // addUser: function () {
    //   console.log(this.user.startday);
    //   axios({
    //     method: 'POST',
    //     url: '/users/addUsers',
    //     data: this.user
    //   })
    //     .then((resp) => {
    //       this.dialogTableVisible = false;
    //       this.$message.success("添加成功");
    //       this.findAll();
    //     })
    // },
    updateOrder: function(order){
      this.order=order;
      this.dialogFormVisible4Edit=true
    },
    modifyOrder: function(){
      axios({
        method:'PUT',
        url:'/order/updateOrder',
        data: this.order
      }).then(res=>{
        this.dialogFormVisible4Edit=false,
        this.$message.success("修改成功");
        this.findAll();
      })
    },
    // deleteOrder: function (order) {
    //   console.log(order.oid);
    //   axios({
    //     method: 'delete',
    //     url: '/order/deleteOrder/' + order.oid,
    //   })
    //     .then((res) => {
    //       this.$message.success('删除成功');
    //       this.findAll();
    //     })
    // },
    fahuo(order){
      console.log(order);
      axios({
        method:'GET',
        url: '/admin/fahuo/'+order.oid,
      }).then(res=>{
        this.$message.success("发货成功");
        this.findAll()
      })
      // console.log(order);
      // axios({
      //   method:'Post',
      //   url: '/admin/test/',
      //   data:order
      // }).then(res=>{
      //   this.$message.success("发货成功");
      //   this.findAll()
      // })
    }



  }
};
</script>
<style lang='scss'>
</style>